<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  用户名：<input type="text" class="username"><br>
  密码：<input type="text" class="password"><br>
  <input type="checkbox" id="remeber"><label for="remeber">记住账号密码7天</label>
  <input type="button" value="登录" class="btn">
</body>
<script src="./cookie.js"></script>
<script>

  class Remeber{
    constructor(){
      this.un = $(".username");
      this.pw = $(".password");
      this.rmb = $("#remeber");
      this.btn = $(".btn");
      // 初始读取本地存储，获取上次存的用户信息
      this.init();
      // 绑定登录事件
      this.addEvent();
    }
    init(){
      // this.un.value = cookie.getItem("un") || "";
      // this.pw.value = cookie.getItem("pw") || "";
      // 因为将来存储的用户信息为json字符
      // 所以要先转成对象后，再做使用
      const o = JSON.parse(cookie.getItem("userMsg")) || {};
      this.un.value = o.username || "";
      this.pw.value = o.password || "";
    }
    addEvent(){
      const that = this;
      this.btn.onclick = function(){
        // 判断是否选中了记住账号密码
        if(that.rmb.checked){
          // 将用户信息存到本地存储
          // cookie.setItem("un", that.un.value, {expires:7});
          // cookie.setItem("pw", that.pw.value, {expires:7});

          const userMsg = {
            username: that.un.value,
            password: that.pw.value
          }
          // 因为需要存储的信息为打包之后的对象
          // 但是本地存储中只能存储字符
          // 所以要先将对象转成json字符后再做存储
          cookie.setItem("userMsg", JSON.stringify(userMsg));
          // 保证只占用一条本地存储记录，但是可以存储多个信息

        }
      }
    }
  }

  new Remeber;
  

  function $(s){
    return document.querySelector(s)
  }
</script>
</html>